<template>
  <el-dialog
    :title="detailsBox ? (!dataForm.crewId ? '新增' : '修改') : '详细'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="100px"
    >
      <el-form-item label="船员编号" prop="crewNum">
        <el-input class="width400" v-model="dataForm.crewNum" placeholder="船员编号" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="crewName">
        <el-input class="width400" v-model="dataForm.crewName" placeholder="姓名" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <!-- <el-form-item label="年龄" prop="crewAge">
        <el-input v-model="dataForm.crewAge" placeholder="年龄"></el-input>
      </el-form-item>-->
      <el-form-item label="职务" prop="crewPost">
        <!-- <el-input v-model="dataForm.crewPost" placeholder="职务"></el-input> -->
        <el-select class="width400" v-model="dataForm.crewPost" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsCrewPost"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件类型" prop="documentType">
        <!-- <el-input v-model="dataForm.documentType" placeholder="证件类型"></el-input> -->
        <el-select v-model="dataForm.documentType" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsDocumentType"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号" prop="documentNumber">
        <el-input class="width400" v-model="dataForm.documentNumber" placeholder="证件号" :disabled="!detailsBox" @blur="documentNumberblur"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <!-- <el-input v-model="dataForm.birthday" placeholder="出生日期"></el-input> -->
        <el-date-picker
          :disabled="!detailsBox"
          class="width400"
          v-model="dataForm.birthday"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="性别" size="mini" prop="sex">
        <el-radio-group v-model="dataForm.sex" :disabled="!detailsBox">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="dataForm.phoneNumber" class="width400" placeholder="手机号" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="船员状态" prop="crewStatus">
        <!-- <el-input v-model="dataForm.crewStatus" placeholder="船员状态"></el-input> -->
        <el-select v-model="dataForm.crewStatus" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsCrewStatus"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="推荐人" prop="recommenderId">
        <el-input v-model="dataForm.recommenderId" class="width400" placeholder="推荐人" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="国籍" prop="nationality">
        <!-- <el-input v-model="dataForm.nationality" placeholder="国籍"></el-input> -->
        <el-select v-model="dataForm.nationality" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsNationality"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证书等级" prop="certificateLevel">
        <!-- <el-input v-model="dataForm.certificateLevel" placeholder="证书等级"></el-input> -->
        <el-select v-model="dataForm.certificateLevel" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsCertificateLevel"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="dataForm.remarks" class="width400" placeholder="备注" type="textarea"  :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="家庭地址" prop="homeAddress">
        <el-input v-model="dataForm.homeAddress" class="width400" placeholder="家庭地址" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <!-- <el-form-item label="创建时间" prop="createTime">
        <el-date-picker v-model="dataForm.createTime" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>-->
      <el-form-item label="出生地" prop="birthPlace">
        <el-input v-model="dataForm.birthPlace" class="width400" placeholder="出生地" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="船员类型" prop="crewType">
        <!-- <el-input v-model="dataForm.crewType" placeholder="船员类型"></el-input> -->
        <el-select v-model="dataForm.crewType" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsCrewType"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="政治面貌" prop="political">
        <!-- <el-input v-model="dataForm.political" placeholder="政治面貌"></el-input> -->
        <el-select v-model="dataForm.political" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsPolitical"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="婚姻状况" prop="maritalStatus">
        <!-- <el-input v-model="dataForm.maritalStatus" placeholder="婚姻状况"></el-input> -->
        <el-select v-model="dataForm.maritalStatus" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsMaritalStatus"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="血型" prop="bloodType">
        <!-- <el-input v-model="dataForm.bloodType" placeholder="血型"></el-input> -->
        <el-select v-model="dataForm.bloodType" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsBloodType"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="航海经验" prop="experienceSailing">
        <el-input v-model="dataForm.experienceSailing" class="width400" placeholder="航海经验" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="遣返地" prop="repatriationArea">
        <el-input v-model="dataForm.repatriationArea" class="width400" placeholder="遣返地" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="特殊技能" prop="technicalSkill">
        <el-input v-model="dataForm.technicalSkill" class="width400" placeholder="特殊技能" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="其他联络电话" prop="otherPhone">
        <el-input v-model="dataForm.otherPhone" class="width400" placeholder="其他联络电话" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="通讯地址" prop="postalAddress">
        <el-input v-model="dataForm.postalAddress" class="width400" placeholder="通讯地址" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="dataForm.email" class="width400" placeholder="电子邮箱" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="紧急联络人" prop="emergencyContact">
        <el-input v-model="dataForm.emergencyContact" class="width400" placeholder="紧急联络人" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="与本人关系" prop="relationship">
        <!-- <el-input v-model="dataForm.relationship" placeholder="与本人关系"></el-input> -->
        <el-select v-model="dataForm.relationship" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsRelationship"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关系人手机号" prop="relationshipPhone">
        <el-input v-model="dataForm.relationshipPhone" class="width400" placeholder="关系人手机号" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="关系人其他联络电话" prop="relationshipOtherPhone">
        <el-input v-model="dataForm.relationshipOtherPhone" class="width400" placeholder="关系人其他联络电话" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="毕业院校" prop="school">
        <el-input v-model="dataForm.school" class="width400" placeholder="毕业院校" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="最高学历" prop="education">
        <!-- <el-input v-model="dataForm.education" placeholder="最高学历"></el-input> -->
        <el-select v-model="dataForm.education" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsEducation"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学历证号" prop="certificate">
        <el-input v-model="dataForm.certificate" class="width400" placeholder="学历证号" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="毕业时间" prop="graduationTime">
        <!-- <el-input v-model="dataForm.graduationTime" placeholder="毕业时间"></el-input> -->
        <el-date-picker
         :disabled="!detailsBox"
         class="width400"
          v-model="dataForm.graduationTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="专业" prop="major">
        <el-input v-model="dataForm.major" class="width400" placeholder="专业" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="英文水平" prop="englishProficiency">
        <!-- <el-input v-model="dataForm.englishProficiency" placeholder="英文水平"></el-input> -->
        <el-select v-model="dataForm.englishProficiency" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsEnglishProficiency"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="其他语种" prop="otherLanguages">
        <el-input v-model="dataForm.otherLanguages" class="width400" placeholder="其他语种" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="语言水平" prop="otherLanguageProficiency">
        <!-- <el-input v-model="dataForm.otherLanguageProficiency" placeholder="语言水平"></el-input> -->
        <el-select v-model="dataForm.otherLanguageProficiency" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsOtherLanguageProficiency"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="寻求职务" prop="seekingJob">
        <!-- <el-input v-model="dataForm.seekingJob" placeholder="寻求职务"></el-input> -->
        <el-select v-model="dataForm.seekingJob" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsSeekingJob"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船舶类型" prop="shipType">
        <!-- <el-input v-model="dataForm.shipType" placeholder="船舶类型"></el-input> -->
        <el-select v-model="dataForm.shipType" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsShipType"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="航区" prop="navigationArea">
        <!-- <el-input v-model="dataForm.navigationArea" placeholder="航区"></el-input> -->
        <el-select v-model="dataForm.navigationArea" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsNavigationArea"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="载重吨位" prop="deadweightTonnage">
        <el-input v-model="dataForm.deadweightTonnage" class="width400" placeholder="载重吨位" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="薪资要求" prop="salaryEquirement">
        <el-input v-model="dataForm.salaryEquirement" class="width400" placeholder="薪资要求" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <el-form-item label="币种" prop="currency">
        <!-- <el-input v-model="dataForm.currency" placeholder="币种"></el-input> -->
        <el-select v-model="dataForm.currency" class="width400" placeholder="请选择" :disabled="!detailsBox">
          <el-option
            v-for="item in optionsCurrency"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="其他要求" prop="otherRequirements">
        <el-input v-model="dataForm.otherRequirements" class="width400" placeholder="其他要求" :disabled="!detailsBox"></el-input>
      </el-form-item>
      <div style="border:1px solid #ebeef5;border-radius: 5px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
        <div style="height:40px; line-height:40px;font-size: 16px;font-weight: bold; padding-left:10px;border-bottom:1px solid #ebeef5;">履历</div>
        <div v-for="(item, index) in dataForm.experience_list" :key="index" style="padding-top:10px;">
          <el-form-item label="起始时间" prop="startTime">
            <el-date-picker
            :disabled="!detailsBox"
              class="width400"
              v-model="item.startTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="终止时间"  prop="endTime">
            <el-date-picker
            :disabled="!detailsBox"
              class="width400"
              v-model="item.endTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="职务" prop="crewPostex">
            <el-select v-model="item.crewPostex" class="width400" placeholder="请选择" :disabled="!detailsBox">
              <el-option
                v-for="item in optionsCrewPost"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="item.companyName" class="width400" placeholder="公司名称" :disabled="!detailsBox"></el-input>
          </el-form-item>
          <el-form-item label="船舶名称" prop="vesselName">
            <el-input v-model="item.vesselName" class="width400" placeholder="船舶名称" :disabled="!detailsBox"></el-input>
          </el-form-item>
          <el-form-item label="船东名称" prop="shipownerName">
            <el-input v-model="item.shipownerName" class="width400" placeholder="船东名称" :disabled="!detailsBox"></el-input>
          </el-form-item>
          <el-form-item label="船舶类型" prop="shipTypeex">
            <el-select v-model="item.shipTypeex" class="width400" placeholder="请选择" :disabled="!detailsBox">
              <el-option
                v-for="item in optionsShipType"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主机型号" prop="hostModel">
            <el-input v-model="item.hostModel" class="width400" placeholder="主机型号" :disabled="!detailsBox"></el-input>
          </el-form-item>
          <el-form-item label="航区" prop="navigationAreaex">
            <el-select v-model="item.navigationAreaex" class="width400" placeholder="请选择" :disabled="!detailsBox">
              <el-option
                v-for="item in optionsNavigationArea"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-button
              v-if="detailsBox"
              type="text"
              style="margin-left:190px"
              @click="deleteItems(item, index)"
              icon="el-icon-delete"
              v-show="index>0"
            >删除</el-button>
          </el-form-item>
          <el-form-item v-if="detailsBox">
            <el-button type="text" @click="addItem" style="position: relative;left:10px">
              <i class="el-icon-circle-plus"></i>新增履历
            </el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button type="primary" @click="experienceHandle(scope.row.crewId)">添加履历</el-button> -->
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="detailsBox">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dataVariety: {
      type: Boolean
    },
    detailsBox: {
      type: Boolean
    }
  },
  data() {
    return {
      visible: false,
      dataForm: {
        crewId: 0,
        crewNum: "",
        crewName: "",
        crewPost: "",
        crewStatus: "",
        nationality: "",
        certificateLevel: "",
        remarks: "",
        phoneNumber: "",
        homeAddress: "",
        recommenderId: "",
        createTime: "",
        birthPlace: "",
        documentType: "",
        documentNumber: "",
        birthday: "",
        sex: 0,
        crewType: "",
        political: "",
        maritalStatus: "",
        bloodType: "",
        experienceSailing: "",
        repatriationArea: "",
        technicalSkill: "",
        otherPhone: "",
        postalAddress: "",
        email: "",
        emergencyContact: "",
        relationship: "",
        relationshipPhone: "",
        relationshipOtherPhone: "",
        createUserIp: "",
        affiliatedCompanyId: "",
        createUserId: "",
        school: "",
        education: "",
        certificate: "",
        graduationTime: "",
        major: "",
        englishProficiency: "",
        otherLanguages: "",
        otherLanguageProficiency: "",
        seekingJob: "",
        shipType: "",
        navigationArea: "",
        deadweightTonnage: "",
        salaryEquirement: "",
        currency: "",
        otherRequirements: "",
        experience_list: [
          {
            startTime: "",
            endTime: "",
            crewPostex: "",
            companyName: "",
            vesselName: "",
            shipownerName: "",
            shipTypeex: "",
            hostModel: "",
            navigationAreaex: ""
          }
        ]
      },
      dataRule: {
        crewNum: [
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        crewName: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        crewPost: [
          { required: true, message: "职务不能为空", trigger: "blur" }
        ],
        crewStatus: [
          { required: true, message: "船员状态不能为空", trigger: "blur" }
        ],
        // nationality: [
        //   { required: true, message: "国籍不能为空", trigger: "blur" }
        // ],
        // certificateLevel: [
        //   { required: true, message: "证书等级不能为空", trigger: "blur" }
        // ],
        remarks: [{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }],
        phoneNumber: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        // homeAddress: [
        //   { required: true, message: "家庭地址不能为空", trigger: "blur" }
        // ],
        recommenderId: [
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        // createTime: [
        //   { required: true, message: "创建时间不能为空", trigger: "blur" }
        // ],
        // birthPlace: [
        //   { required: true, message: "出生地不能为空", trigger: "blur" }
        // ],
        documentType: [
          { required: true, message: "证件类型不能为空", trigger: "blur" }
        ],
        documentNumber: [
          { required: true, message: "证件号不能为空", trigger: "blur" }
        ],
        repatriationArea: [
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        technicalSkill: [
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        otherPhone: [
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        postalAddress: [
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        homeAddress: [
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        email: [
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        emergencyContact: [
          { required: true, message: "紧急联系人不能为空", trigger: "blur" },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        relationship: [
          { required: true, message: "与本人关系不能为空", trigger: "blur" }
        ],
        relationshipPhone: [
          { required: true, message: "关系人手机号不能为空", trigger: "blur" },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        school: [
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        certificate: [
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        major: [
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        salaryEquirement: [
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        // birthday: [
        //   { required: true, message: "出生日期不能为空", trigger: "blur" }
        // ],
        // sex: [{ required: true, message: "性别不能为空", trigger: "blur" }],
        // crewType: [
        //   { required: true, message: "船员类型不能为空", trigger: "blur" }
        // ],
        // political: [
        //   { required: true, message: "政治面貌不能为空", trigger: "blur" }
        // ],
        // maritalStatus: [
        //   { required: true, message: "婚姻状况不能为空", trigger: "blur" }
        // ],
        // bloodType: [
        //   { required: true, message: "血型不能为空", trigger: "blur" }
        // ],
        // experienceSailing: [
        //   { required: true, message: "航海经验不能为空", trigger: "blur" }
        // ],
        // technicalSkill: [
        //   { required: true, message: "特殊技能不能为空", trigger: "blur" }
        // ],
        // otherPhone: [
        //   { required: true, message: "其他联络电话不能为空", trigger: "blur" }
        // ],
        // postalAddress: [
        //   { required: true, message: "通讯地址不能为空", trigger: "blur" }
        // ],
        // email: [
        //   { required: true, message: "电子邮箱不能为空", trigger: "blur" }
        // ],
        // emergencyContact: [
        //   { required: true, message: "紧急联络人不能为空", trigger: "blur" }
        // ],
        // relationship: [
        //   { required: true, message: "与本人关系不能为空", trigger: "blur" }
        // ],
        // relationshipPhone: [
        //   { required: true, message: "关系人手机号不能为空", trigger: "blur" }
        // ],
        // relationshipOtherPhone: [
        //   {
        //     required: true,
        //     message: "关系人其他联络电话不能为空",
        //     trigger: "blur"
        //   }
        // ],
        // createUserIp: [
        //   { required: true, message: "创建IP不能为空", trigger: "blur" }
        // ],
        // affiliatedCompanyId: [
        //   { required: true, message: "所属公司不能为空", trigger: "blur" }
        // ],
        // createUserId: [
        //   { required: true, message: "创建人不能为空", trigger: "blur" }
        // ],
        // school: [
        //   { required: true, message: "毕业院校不能为空", trigger: "blur" }
        // ],
        // education: [
        //   { required: true, message: "最高学历不能为空", trigger: "blur" }
        // ],
        // certificate: [
        //   { required: true, message: "学历证号不能为空", trigger: "blur" }
        // ],
        // graduationTime: [
        //   { required: true, message: "毕业时间不能为空", trigger: "blur" }
        // ],
        // major: [{ required: true, message: "专业不能为空", trigger: "blur" }],
        // englishProficiency: [
        //   { required: true, message: "英文水平不能为空", trigger: "blur" }
        // ],
        // otherLanguages: [
        //   { required: true, message: "其他语种不能为空", trigger: "blur" }
        // ],
        // otherLanguageProficiency: [
        //   { required: true, message: "语言水平不能为空", trigger: "blur" }
        // ],
        // seekingJob: [
        //   { required: true, message: "寻求职务不能为空", trigger: "blur" }
        // ],
        // shipType: [
        //   { required: true, message: "船舶类型不能为空", trigger: "blur" }
        // ],
        // navigationArea: [
        //   { required: true, message: "航区不能为空", trigger: "blur" }
        // ],
        // deadweightTonnage: [
        //   { required: true, message: "载重吨位不能为空", trigger: "blur" }
        // ],
        // salaryEquirement: [
        //   { required: true, message: "薪资要求不能为空", trigger: "blur" }
        // ],
        // currency: [
        //   { required: true, message: "币种不能为空", trigger: "blur" }
        // ],
        // otherRequirements: [
        //   { required: true, message: "其他要求不能为空", trigger: "blur" }
        // ]
      },
      optionsCrewPost: [],
      optionsCrewStatus: [],
      optionsNationality: [],
      optionsCertificateLevel: [],
      optionsDocumentType: [],
      optionsSex: [],
      optionsCrewType: [],
      optionsPolitical: [],
      optionsMaritalStatus: [],
      optionsBloodType: [],
      optionsRelationship: [],
      optionsAffiliatedCompanyId: [],
      optionsEducation: [],
      optionsEnglishProficiency: [],
      optionsOtherLanguageProficiency: [],
      optionsSeekingJob: [],
      optionsShipType: [],
      optionsNavigationArea: [],
      optionsCurrency: []
    };
  },
  watch: {
    dataVariety() {
      this.dataForm = {
        crewId: 0,
        crewNum: "",
        crewName: "",
        crewPost: "",
        crewStatus: "",
        nationality: "",
        certificateLevel: "",
        remarks: "",
        phoneNumber: "",
        homeAddress: "",
        recommenderId: "",
        createTime: "",
        birthPlace: "",
        documentType: "",
        documentNumber: "",
        birthday: "",
        sex: 0,
        crewType: "",
        political: "",
        maritalStatus: "",
        bloodType: "",
        experienceSailing: "",
        repatriationArea: "",
        technicalSkill: "",
        otherPhone: "",
        postalAddress: "",
        email: "",
        emergencyContact: "",
        relationship: "",
        relationshipPhone: "",
        relationshipOtherPhone: "",
        createUserIp: "",
        affiliatedCompanyId: "",
        createUserId: "",
        school: "",
        education: "",
        certificate: "",
        graduationTime: "",
        major: "",
        englishProficiency: "",
        otherLanguages: "",
        otherLanguageProficiency: "",
        seekingJob: "",
        shipType: "",
        navigationArea: "",
        deadweightTonnage: "",
        salaryEquirement: "",
        currency: "",
        otherRequirements: "",
        experience_list: [
          {
            startTime: "",
            endTime: "",
            crewPostex: "",
            companyName: "",
            vesselName: "",
            shipownerName: "",
            shipTypeex: "",
            hostModel: "",
            navigationAreaex: ""
          }
        ]
      }
    }
  },
  methods: {
    documentNumberblur() {
      var idCard = this.dataForm.documentNumber
      var birthday = "";  
      if(idCard != null && idCard != ""){  
          if(idCard.length == 15){  
              birthday = "19"+idCard.substr(6,6);  
          } else if(idCard.length == 18){  
              birthday = idCard.substr(6,8);  
          }  
        
          birthday = birthday.replace(/(.{4})(.{2})/,"$1-$2-");  
      }
      this.dataForm.birthday = birthday
    },
    init(id, iStatus) {
      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${1}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsCrewPost = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${2}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsCrewStatus = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${3}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsNationality = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${7}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsCertificateLevel = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${5}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsDocumentType = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${8}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsCrewType = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${9}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsPolitical = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${10}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsMaritalStatus = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${11}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsBloodType = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${12}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsRelationship = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl("/generator/affiliatedcompanyinfo/select"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsAffiliatedCompanyId =
          data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${13}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsEducation = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${14}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsEnglishProficiency =
          data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${14}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsOtherLanguageProficiency =
          data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${1}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsSeekingJob = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${15}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsShipType = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${16}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsNavigationArea = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${18}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsCurrency = data && data.code === 0 ? data.list : [];
      });

      this.dataForm.crewId = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.crewId) {
          console.log('this.dataForm.dispatchId', this.dataForm.crewId)
          this.$http({
            url: this.$http.adornUrl(
              `/generator/crewinfo/info/${this.dataForm.crewId}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.crewNum = data.crewInfo.crewNum;
              this.dataForm.crewName = data.crewInfo.crewName;
              this.dataForm.crewPost = data.crewInfo.crewPost;
              this.dataForm.crewStatus = data.crewInfo.crewStatus;
              this.dataForm.nationality = data.crewInfo.nationality;
              this.dataForm.certificateLevel = data.crewInfo.certificateLevel;
              this.dataForm.remarks = data.crewInfo.remarks;
              this.dataForm.phoneNumber = data.crewInfo.phoneNumber;
              this.dataForm.homeAddress = data.crewInfo.homeAddress;
              this.dataForm.recommenderId = data.crewInfo.recommenderId;
              this.dataForm.createTime = data.crewInfo.createTime;
              this.dataForm.birthPlace = data.crewInfo.birthPlace;
              this.dataForm.documentType = data.crewInfo.documentType;
              this.dataForm.documentNumber = data.crewInfo.documentNumber;
              this.dataForm.birthday = data.crewInfo.birthday;
              this.dataForm.sex = data.crewInfo.sex;
              this.dataForm.crewType = data.crewInfo.crewType;
              this.dataForm.political = data.crewInfo.political;
              this.dataForm.maritalStatus = data.crewInfo.maritalStatus;
              this.dataForm.bloodType = data.crewInfo.bloodType;
              this.dataForm.experienceSailing = data.crewInfo.experienceSailing;
              this.dataForm.repatriationArea = data.crewInfo.repatriationArea;
              this.dataForm.technicalSkill = data.crewInfo.technicalSkill;
              this.dataForm.otherPhone = data.crewInfo.otherPhone;
              this.dataForm.postalAddress = data.crewInfo.postalAddress;
              this.dataForm.email = data.crewInfo.email;
              this.dataForm.emergencyContact = data.crewInfo.emergencyContact;
              this.dataForm.relationship = data.crewInfo.relationship;
              this.dataForm.relationshipPhone = data.crewInfo.relationshipPhone;
              this.dataForm.relationshipOtherPhone =
                data.crewInfo.relationshipOtherPhone;
              this.dataForm.createUserIp = data.crewInfo.createUserIp;
              this.dataForm.affiliatedCompanyId =
                data.crewInfo.affiliatedCompanyId;
              this.dataForm.createUserId = data.crewInfo.createUserId;
              this.dataForm.school = data.crewInfo.school;
              this.dataForm.education = data.crewInfo.education;
              this.dataForm.certificate = data.crewInfo.certificate;
              this.dataForm.graduationTime = data.crewInfo.graduationTime;
              this.dataForm.major = data.crewInfo.major;
              this.dataForm.englishProficiency =
                data.crewInfo.englishProficiency;
              this.dataForm.otherLanguages = data.crewInfo.otherLanguages;
              this.dataForm.otherLanguageProficiency =
                data.crewInfo.otherLanguageProficiency;
              this.dataForm.seekingJob = data.crewInfo.seekingJob;
              this.dataForm.shipType = data.crewInfo.shipType;
              this.dataForm.navigationArea = data.crewInfo.navigationArea;
              this.dataForm.deadweightTonnage = data.crewInfo.deadweightTonnage;
              this.dataForm.salaryEquirement = data.crewInfo.salaryEquirement;
              this.dataForm.currency = data.crewInfo.currency;
              this.dataForm.otherRequirements = data.crewInfo.otherRequirements;
              this.dataForm.experience_list = data.crewInfo.experience_list;
              if (iStatus === 0) {
                this.visibleSubmit = "";
              } else {
                this.visibleSubmit = "none";
              }
            }
          });
        }
      });
    },

    addItem() {
      this.dataForm.experience_list.push({
        startTime: "",
        endTime: "",
        crewPostex: "",
        companyName: "",
        vesselName: "",
        shipownerName: "",
        shipTypeex: "",
        hostModel: "",
        navigationAreaex: ""
      });
    },

    deleteItems(item, index) {
        this.index = this.dataForm.experience_list.indexOf(item);
        if (index !== -1) {
          this.dataForm.experience_list.splice(index, 1)
        }
      },

    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/generator/crewinfo/${!this.dataForm.crewId ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              crewId: this.dataForm.crewId || undefined,
              crewNum: this.dataForm.crewNum,
              crewName: this.dataForm.crewName,
              crewPost: this.dataForm.crewPost,
              crewStatus: this.dataForm.crewStatus,
              nationality: this.dataForm.nationality,
              certificateLevel: this.dataForm.certificateLevel,
              remarks: this.dataForm.remarks,
              phoneNumber: this.dataForm.phoneNumber,
              homeAddress: this.dataForm.homeAddress,
              recommenderId: this.dataForm.recommenderId,
              createTime: this.dataForm.createTime,
              birthPlace: this.dataForm.birthPlace,
              documentType: this.dataForm.documentType,
              documentNumber: this.dataForm.documentNumber,
              birthday: this.dataForm.birthday,
              sex: this.dataForm.sex,
              crewType: this.dataForm.crewType,
              political: this.dataForm.political,
              maritalStatus: this.dataForm.maritalStatus,
              bloodType: this.dataForm.bloodType,
              experienceSailing: this.dataForm.experienceSailing,
              repatriationArea: this.dataForm.repatriationArea,
              technicalSkill: this.dataForm.technicalSkill,
              otherPhone: this.dataForm.otherPhone,
              postalAddress: this.dataForm.postalAddress,
              email: this.dataForm.email,
              emergencyContact: this.dataForm.emergencyContact,
              relationship: this.dataForm.relationship,
              relationshipPhone: this.dataForm.relationshipPhone,
              relationshipOtherPhone: this.dataForm.relationshipOtherPhone,
              createUserIp: this.dataForm.createUserIp,
              affiliatedCompanyId: this.dataForm.affiliatedCompanyId,
              createUserId: this.dataForm.createUserId,
              school: this.dataForm.school,
              education: this.dataForm.education,
              certificate: this.dataForm.certificate,
              graduationTime: this.dataForm.graduationTime,
              major: this.dataForm.major,
              englishProficiency: this.dataForm.englishProficiency,
              otherLanguages: this.dataForm.otherLanguages,
              otherLanguageProficiency: this.dataForm.otherLanguageProficiency,
              seekingJob: this.dataForm.seekingJob,
              shipType: this.dataForm.shipType,
              navigationArea: this.dataForm.navigationArea,
              deadweightTonnage: this.dataForm.deadweightTonnage,
              salaryEquirement: this.dataForm.salaryEquirement,
              currency: this.dataForm.currency,
              otherRequirements: this.dataForm.otherRequirements,
              experience_list: this.dataForm.experience_list
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
